<template>
	<div class="ShopAccount pushAdd">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>消息推送</el-breadcrumb-item>
			<el-breadcrumb-item>新建任务</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">新建任务</h4>
			</div>
			<div class="pt_10">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>任务名称</div>
					<div class="fl list-cont">
						<el-input v-model="formData.case_title"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>推送方式</div>
					<div class="fl list-cont">
						<el-checkbox-group v-model="formData.platform">
							<el-checkbox v-for="(item, index) in configList.platform" :label="item.sn" :key="index">{{
								item.name
							}}</el-checkbox>
						</el-checkbox-group>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>公众号</div>
					<div class="fl list-cont">
						<el-radio
							v-model="formData.send_object"
							:label="item.sn"
							v-for="(item, index) in configList.send_object"
							:key="index"
							>{{ item.name }}</el-radio
						>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i><span>接收人</span></div>
					<div class="fl list-cont">
						<el-input type="textarea" :rows="4" :cols="30" placeholder="" v-model="formData.mobileInfo"></el-input>
						<span class="tips">注: 最多输入1000个手机号</span>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>消息模版</div>
					<div class="fl list-cont">
						<el-select v-model="formData.platform_temp_id" @change="selectTemp">
							<el-option
								:label="item.name"
								:value="item.sn"
								v-for="(item, index) in configList.platform_temp_id"
								:key="index"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear" v-for="(item, index) in object" :key="'arr' + index">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>{{ item.name }}</div>
					<div class="fl list-cont">
						<el-input v-model="arr[item.keys]"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>跳转页面路径</div>
					<div class="fl list-cont">
						<el-input v-model="formData.url"></el-input>
					</div>
				</div>
			</div>
			<div class="ml_110 mt_80">
				<span class="resetBtn mr_10" @click="back">返回</span>
				<span class="btnOK" @click="submitBtn">保存</span>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { messageConf, addMessage } from '@/api/push.js'

export default {
	name: 'pushAdd',
	data() {
		return {
			//表单数据
			formData: {
				case_title: '',
				platform: [],
				send_object: '',
				mobileInfo: '',
				platform_temp_id: '',
				url: ''
			},
			object: {},
			configList: [],
			arr: {
				first: '',
				keyword1: '',
				keyword2: '',
				remark: ''
			}
		}
	},
	async created() {
		await this.fetchConfig()
	},
	mounted() {},
	methods: {
		async submitBtn() {
			try {
				for (let key in this.formData) {
					if (!this.formData[key]) {
						this.$message.error('请输入必填项！')
						return
					}
				}

				for (let key in this.arr) {
					if (!this.arr[key]) {
						this.$message.error('请输入必填项！')
						return
					}
				}

				let { platform, mobileInfo, ...query } = this.formData
				var mobileInfos = mobileInfo
					.replace(/\n/g, ',')
					.split(',')
					.filter(function (s) {
						return s && s.trim()
					})

				const sendObject = this.configList.send_object.find(it => it.sn == this.formData.send_object)

				let ret = await addMessage({
					platform: platform.join(','),
					mobileInfo: mobileInfos.toString(),
					...query,
					...this.arr,
					event: sendObject && sendObject.event
				})

				this.$message.success(this.$route.query.sn ? '编辑成功！' : '新增成功！')
				this.back()
			} catch (err) {
				console.log(err)
			}
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		async fetchConfig() {
			try {
				let ret = await messageConf()
				this.configList = ret
			} catch (err) {
				console.log(err)
			}
		},
		selectTemp(e) {
			this.configList.platform_temp_id.forEach(item => {
				if (item.sn == e) {
					this.object = item.fields
					item.fields.forEach(element => {
						this.arr[element.keys] = element.info
					})
				}
			})
		}
	}
}
</script>

<style scoped>
.personnelAdd {
	margin: 15px 15px 0 15px;
}
.row-info {
	padding: 10px 0;
}
.resetBtn,
.btnOK {
	padding: 0 30px;
}
.title-key {
	width: 100px;
}
.list-cont img {
	width: 128px;
}

.r-90 {
	transform: rotate(-90deg);
}
.r180 {
	transform: rotate(180deg);
}
.r90 {
	transform: rotate(90deg);
}
.avatar {
	position: relative;
	top: -80px;
	left: 50px;
	width: 100px !important;
}
.dingwei {
	font-size: 26px;
	color: var(--btn);
}
</style>
<style>
.pushAdd .el-textarea .el-input__count {
	background: none;
}

.pushAdd .row-info .list-cont {
	width: 300px;
}
</style>

<style scoped lang="scss">
.tips {
	color: #c00;
	font-size: 14px;
}
</style>



// WEBPACK FOOTER //
// src/components/messagepush/PushAdd.vue